<template>
  <div class="appreciation-container">
    <h1>赞赏支持</h1>
    <div class="content">
      <p>如果您觉得这个项目对您有帮助，欢迎赞赏支持！</p>
      <div class="payment-methods">
        <div class="method">
          <h3>微信支付</h3>
          <img src="@/assets/images/wechat-pay.png" alt="微信支付二维码" />
        </div>
        <div class="method">
          <h3>支付宝</h3>
          <img src="@/assets/images/alipay.png" alt="支付宝二维码" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'AppreciationPage',
})

// 可以添加相关逻辑
</script>

<style scoped>
.appreciation-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.payment-methods {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.method {
  text-align: center;
}

.method img {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
</style>
